import { Checkbox } from 'antd';
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';

const ZcpopoverContent = ({ n,  setSelectedTags,  options = [{ label: "默认", value: "default" }], setRiskCode }) => {
    const [selectList, setSelect] = useState([]);
    // 监听n值变化，变化了说明进行了清空操作
    useEffect(() => {
        setSelect([])
    }, [n])


    // 确保只能单选而且可以不选的功能函数
    const onChange = (checkedValues) => {
        const selectData = [...selectList];
        if (checkedValues.length === 0 && selectList.length === 1) {
            setSelect([]);
        } else if (checkedValues.length === 0) {
            setSelect(selectData)
        } else {
            const tmpArr = checkedValues?.filter(item => {
                return selectData.indexOf(item) === -1;
            })
            setSelect(tmpArr)
        }
    };

    // 监听选择的是哪个checkbox，然后给父组件设置值
    useEffect(() => {
        setSelectedTags([...selectList])
        setRiskCode(options.length > 1 ? selectList[0] : null)
    }, [selectList])

    return (
        <div>
            <Checkbox.Group
                options={options}
                defaultValue={[]}
                value={selectList}
                onChange={onChange} />
        </div>
    )

}

export default ZcpopoverContent;